<template>
  <div>
    <el-card>
       <Categoryselector @categoryChange='handelCategoryChange'></Categoryselector>
    </el-card>
    <div>
      <el-card>
          <div v-show='showSpku===1'>
            <el-button type="primary" icon='el-icon-plus' @click='addSpu'>添加SPU</el-button>
        <el-table
          style="margin:10px 0"
          :data="spuList"
          row-key="id"
          border
         >
          <el-table-column
            type="index"
            label="序号"
            width="100">
          </el-table-column>
          <el-table-column
            prop='spuName'
            label="SPU名称"
            >
          </el-table-column>
          <el-table-column
            prop='description'
            label="SPU描述"
           >
          </el-table-column>
          <el-table-column
            label="操作"
            >
          <template v-slot='{row}'>
          <Hintbutton type='primary' title="添加SKU" icon='el-icon-plus' size='small' @click='addSku(row)'></Hintbutton>
           <Hintbutton type='primary' title="修改SPU" icon='el-icon-edit' size='small' @click='updateSpu(row)'></Hintbutton>
           <Hintbutton type='info' title="查看SKU列表" icon='el-icon-info' size='small' @click='getSkuList(row)'></Hintbutton>
           <el-popconfirm
              :title="`确定删除${row.spuName}吗？`"
              @onConfirm='delSpuList(row.id)'
            >
            <Hintbutton type='danger' title="删除SPU" icon='el-icon-delete' size='small' slot="reference" style="margin-left:10px"></Hintbutton>
            </el-popconfirm>
           
          </template>
          </el-table-column>
        </el-table>
         <el-pagination
          align='center'
          @current-change='getList'
          @size-change='handlePageSize'
          :current-page="currentPage"
          :page-sizes="[3, 6, 9]"
          :page-size="limit"
          layout="prev, pager, next, jumper, ->, sizes, total"
          :total="total">
        </el-pagination>
          </div>
          <SpuForm  v-show='showSpku===2' @cancel='handleCancel' ref='spuForm' @success='handleSuccess'></SpuForm>
          <SkuForm :showSpku.sync='showSpku' ref='skuForm' @success='showSpku=1'></SkuForm>
            <el-dialog :title='`${spu.spuName}=>SKU列表`' :visible.sync="isShowDialog">
              <el-table :data="skuList" v-loading="isLoading">
                <el-table-column property="skuName" label="名称"></el-table-column>
                <el-table-column property="price" label="价格(元)"></el-table-column>
                <el-table-column property="weight" label="重量(KG)"></el-table-column>
                 <el-table-column
                    label='默认图片'>
                   <template v-slot='{row}'>
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="row.skuDefaultImg"
                  ></el-image>
                 </template>
                 </el-table-column>
              </el-table>
            </el-dialog>
      </el-card>
    </div>
   
  </div>
</template>

<script>
import SkuForm from '../components/SkuForm.vue'
import SpuForm from '../components/SpuForm.vue'
export default {
  name: 'SpuList',
  components:{
    SkuForm,
    SpuForm
  },
  data(){
    return{
      category1Id:null,
      category2Id:null,
      category3Id:null,
      currentPage:1,
      limit:3,
      total:0,
      spuList:[],
      spu:{},
      skuList:[],
      isShowDialog:false,
      isLoading:false,
      showSpku:1
    }
  },
  methods:{
    async delSpuList(id){
      await this.$api.spu.remove(id)
      this.getList()
    },
    handleCancel(){
      this.showSpku=1
      this.skuId=null
    },
    handleSuccess(){
      this.showSpku=1
      if(this.skuId){
        this.skuId=null
        this.getList(this.currentPage)
      }else{
        this.getList()
      }
    },
    addSpu(){
      this.showSpku=2
      this.$refs.spuForm.initLoadAdd(this.category3Id)
    },
    updateSpu(row){
      this.showSpku=2
      this.skuId=row.id
      this.$refs.spuForm.initLoadUpdate(row.id)
    },
    async getSkuList(row){
      this.spu=row
      this.isShowDialog=true
      this.isLoading=true
      
      const result=await this.$api.sku.findSkuList(row.id)
    //  console.log(result);
       this.skuList=result.data
       this.isLoading=false
    },
    handlePageSize(limit){
      this.limit=limit
      this.getList(1)
    },
    handelCategoryChange({categoryId,level}){
      if(level===1){
        this.category2Id=null
        this.category3Id=null
        this.spuList=[]
        this.category1Id=categoryId
      }else if(level===2){
        this.category3Id=null
        this.spuList=[]
        this.category2Id=categoryId
      }else{
        this.category3Id=categoryId
        this.getList(1)
      }
    },
    async getList(page=1){
      this.currentPage=page
      const {data}=await this.$api.spu.getList(page,this.limit,this.category3Id)
      const {records,total}=data
      this.spuList=records;
      this.total=total
    },
    addSku(row){
      this.showSpku=3
      row = {
        ...row,
        category1Id:this.category1Id,
        category2Id:this.category2Id,
        
      }
      this.$refs.skuForm.initAddData(row)
    }
  },
  mounted(){
    this.category1Id=2
    this.category2Id=13
    this.category3Id=61
    this.getList()
  }
}
</script>

<style lang="scss" scoped>

</style>
